<template>
  <div class="phone-section">
    <h2>手机专区</h2>
    <div class="product" v-for="item in phoneProducts" :key="item.id">
      <h3>{{ item.name }}</h3>
      <p>价格: ¥{{ item.price }}</p>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const phoneProducts = [
  {
    id: 1,
    name: "旗舰手机 Pro",
    price: 5999,
    description: "最新款旗舰手机，性能强劲",
  },
  {
    id: 2,
    name: "轻薄手机 Lite",
    price: 3999,
    description: "轻薄设计，超长续航",
  },
];
</script>

<style scoped>
.phone-section {
  padding: 1rem;
}
.product {
  border: 1px solid #eee;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 4px;
}
</style>
